<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: zoud
  Date: 2016/9/23
  Time: 17:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Database Commons - ${db.shortName}</title>
    <link href="${host}/static/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="panel panel-default">
    <ol class="breadcrumb">
        <li><a href="${host}/">Home</a></li>
        <li><a href="${host}/browse">Browse</a></li>
        <li class="active">${db.shortName}</li>
    </ol>
    <div class="panel-body" style="padding-top: 0">
        <h3 class="text-primary">${db.shortName}
            <c:choose>
                <c:when test="${currentUser != null}">
                    <span class="pull-right"><a href="${host}/curator/db/edit/${db.dbId}" class="btn btn-sx btn-info"><i
                            class="fa fa-edit"></i> Edit</a></span>
                </c:when>
                <c:otherwise>
                    <span class="pull-right"><a href="${host}/login" class="btn btn-sx btn-info">Edit</a></span>
                </c:otherwise>
            </c:choose>
        </h3>

        <table>
            <tr>
                <c:if test="${ratingList.size() gt 0}">
                    <td>
                        <input id="rate" name="rate" value="<fmt:formatNumber value="${avg}" maxFractionDigits="1" />"
                               class="rating rating-loading" data-show-clear="false" data-step="0.1" data-size="xs"
                               data-show-caption="false" data-readonly="true"/>
                    </td>
                    <td style="padding-bottom: 5px;padding-left: 10px"><span class="label label-info"
                                                                             style="font-size: 14px;"><fmt:formatNumber
                            value="${avg}" maxFractionDigits="1"/> Stars (${ratingList.size()})</span></td>
                </c:if>
                <c:if test="${ratingList.size() eq 0}">
                    <td>
                        <input name="rate" value="0" class="rating rating-loading" data-show-clear="false"
                               data-size="xs" data-show-caption="true" data-readonly="true"/>
                    </td>
                </c:if>
                <td style="padding-left: 50px;padding-top: 5px"><p class="text-warning">Citations: ${citation}</p></td>
                <td style="padding-left: 50px;padding-top: 5px"><p class="text-success">z-index: <c:if
                        test="${db.publicationList.size() gt 0}">
                    <fmt:formatNumber value="${db.getZindex(db.httpStatuses, db.publicationList)}"
                                      maxFractionDigits="2"/>
                </c:if>
                    <c:if test="${db.publicationList.size() eq 0}">
                        0
                    </c:if></p></td>
            </tr>
        </table>


        <div class="row">
            <div class="col-md-8">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <tr class="info">
                            <th colspan="2">Basic information</th>
                        </tr>
                        <tr>
                            <td>Short name</td>
                            <td>${db.shortName}</td>
                        </tr>
                        <tr>
                            <td>Full name</td>
                            <td>${db.fullName}</td>
                        </tr>
                        <tr>
                            <td>Description</td>
                            <td>${db.description}</td>
                        </tr>
                        <tr>
                            <td>URL</td>
                            <td><a href="${db.url}" target="_blank">${db.url}</a></td>
                        </tr>
                        <tr>
                            <td>Year founded</td>
                            <td>${db.foundedYear}</td>
                        </tr>
                        <tr>
                            <td>Last update & version</td>
                            <td>${db.lastUpdate} ${db.currentVersion}</td>
                        </tr>
                        <tr>
                            <td>Availability</td>
                            <td>${db.availableProtocol}</td>
                        </tr>
                        <tr class="info">
                            <th colspan="2">Contact information</th>
                        </tr>
                        <tr>
                            <td>University/Institution hosted</td>
                            <td>${db.hostInstitution}</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>${db.address}</td>
                        </tr>
                        <tr>
                            <td>City</td>
                            <td>${db.city}</td>
                        </tr>
                        <tr>
                            <td>Province/State</td>
                            <td>${db.province}</td>
                        </tr>
                        <tr>
                            <td>Country/Region</td>
                            <td>${db.country}</td>
                        </tr>
                        <tr>
                            <td>Contact name</td>
                            <td>${db.contactName}</td>
                        </tr>
                        <tr>
                            <td>Contact email</td>
                            <td>${db.contactEmail}</td>
                        </tr>
                        <tr class="info">
                            <th colspan="2">Data information</th>
                        </tr>
                        <tr>
                            <td>Data type(s)</td>
                            <td>
                                <ul>
                                    <c:forEach items="${db.dataTypeList}" var="dt">
                                        <li>${dt.datatypeName}</li>
                                    </c:forEach>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Major organism(s)</td>
                            <td>
                                <ul>
                                    <c:forEach items="${db.organismList}" var="osm">
                                        <li>${osm.organismName}</li>
                                    </c:forEach>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td>Keyword(s)</td>
                            <td>
                                <ul>
                                    <c:forEach items="${db.categoryList}" var="ca">
                                        <li>${ca.name}</li>
                                    </c:forEach>
                                </ul>
                            </td>
                        </tr>
                        <tr class="info">
                            <th colspan="2">Publications</th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <ul>
                                    <c:forEach items="${db.publicationList}" var="pub">
                                        <li>
                                            <span><strong>${pub.title}</strong><a
                                                    href="http://www.ncbi.nlm.nih.gov/pubmed/${pub.pmid}"
                                                    target="_blank">[PMID: ${pub.pmid}]</a></span><br>
                                            <span>${pub.author}</span><br>
                                            <span><em>${pub.journal}</em> ${pub.year}:${pub.volume}(${pub.issue})</span><br>
                                            <p class="text-success">${pub.citation} Citations (Google Scholar as of
                                                <fmt:formatDate value="${pub.citationDate}" pattern="yyyy-MM-dd"/>)</p>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title"><i class="fa fa-cloud"></i> World cloud <a
                                href="${host}/database/worldCloud?id=${db.dbId}">(embeddable)</a></h4>
                    </div>
                    <div class="panel-body">
                        <div id="vis"></div>

                        <input type="hidden" id="text" value="${worldCloud}"/>
                        <input type="hidden" id="www" value="350">
                        <input type="hidden" id="hhh" value="350">
                        <input type="hidden" value="200" min="1" id="max">
                        <input type="hidden" id="per-line">
                        <input type="hidden" id="font" value="Impact">

                        <input type="hidden" name="spiral" id="archimedean" value="archimedean" checked="checked">
                        <input type="hidden" name="scale" id="scale-log" value="log" checked="checked">

                        <form action="https://www.jasondavies.com/echo" target="_blank" method="POST"><input
                                type="hidden" name="content-type"><input type="hidden" name="echo"></form>
                    </div>
                </div>

                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h4 class="panel-title"><i class="fa fa-globe"></i> Accessibility</h4>
                    </div>
                    <div class="panel-body">
                        <p>
                            Rate of accessibility <span class="glyphicon glyphicon-question-sign"
                                                        title="The number of successful HTTP requests divided by the number of total requests, ranging from 0 (dead) to 1 (alive)."></span>
                            :
                            <span data-toggle="collapse" data-target="#acc" aria-expanded="false" aria-controls="acc"><button
                                    class="btn btn-info btn-xs" type="button">
                                <fmt:formatNumber value="${httpRate}"
                                                  maxFractionDigits="2"/>(${http1}/${db.httpStatuses.size()}) <i
                                    class="fa fa-sort-down"></i>
                            </button></span>
                        </p>
                        <div class="collapse" id="acc">
                            <table class="table">
                                <tr>
                                    <th><a href='https://en.wikipedia.org/wiki/List_of_HTTP_status_codes'
                                           target='_blank'>HTTP status code</a></th>
                                    <th>Date requested</th>
                                </tr>
                                <c:forEach items="${db.httpStatuses}" var="http">
                                    <tr>
                                        <td>${http.statusCode}
                                            <c:if test="${http.isalive == 1}">
                                                <label class="label label-success">OK</label>
                                            </c:if>
                                            <c:if test="${http.isalive == 0}">
                                                <label class="label label-danger">Failed</label>
                                            </c:if>
                                        </td>
                                        <td><fmt:formatDate value="${http.requestDate}" pattern="yyyy-MM-dd"/></td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 class="panel-title"><i class="fa fa-tags"></i> Tags</h4>
                    </div>
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <li>
                                <ul class="list-inline" style="margin-bottom: 5px">
                                    <c:forEach items="${db.dataTypeList}" var="dt">
                                        <li><label class="label label-success">${dt.datatypeName}</label></li>
                                    </c:forEach>
                                </ul>
                            </li>
                            <li>
                                <ul class="list-inline" style="margin-bottom: 5px">
                                    <c:forEach items="${db.organismList}" var="osm">
                                        <li><label class="label label-primary">${osm.organismName}</label></li>
                                    </c:forEach>
                                </ul>
                            </li>
                            <li>
                                <ul class="list-inline" style="margin-bottom: 5px">
                                    <c:forEach items="${db.categoryList}" var="ca">
                                        <li><label class="label label-warning">${ca.name}</label></li>
                                    </c:forEach>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h4 class="panel-title"><i class="fa fa-recycle"></i> Record metadata</h4>
                    </div>
                    <div class="panel-body">
                        <ul>
                            <li>Created on: <fmt:formatDate value="${db.recordCreated}" pattern="yyyy-MM-dd"/></li>
                            <li>Curated by:
                                <ul>
                                    <c:forEach items="${db.curationList}" var="cur">
                                        <li>${cur.user.lastName} ${cur.user.firstName} [<fmt:formatDate
                                                value="${cur.curationDate}" pattern="yyyy-MM-dd"/>]
                                        </li>
                                    </c:forEach>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"><i class="fa fa-comment"></i> Community reviews <span
                        class='text-success'><fmt:formatNumber
                        value="${avg}" maxFractionDigits="1"/> stars (${total} reviews)</span></h4>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table">
                        <tr>
                            <td><a class="btn btn-primary" role="button" data-toggle="collapse" id="submit"
                                   href="#review" aria-expanded="false">Submit a review</a></td>
                            <td colspan="3"><span id="msg"></span></td>
                        </tr>
                        <tr>
                            <td><strong>Data</strong> <br>quality & quantity</td>
                            <td><strong>Content</strong> <br>organization & presentation</td>
                            <td><strong>Data</strong> <br>accessibility & reliability</td>
                            <th>Reviewed by</th>
                        </tr>
                        <tr class="collapse" id="review">
                            <td><input name="dataScore" class="rating rating-loading" data-min="0" data-max="5"
                                       data-show-clear="false" data-step="1" data-size="xxs"/></td>
                            <td><input name="contentScore" data-min="0" data-max="5"
                                       class="rating rating-loading" data-show-clear="false"
                                       data-step="1" data-size="xxs"/></td>
                            <td><input name="systemScore" data-min="0" data-max="5"
                                       class="rating rating-loading" data-show-clear="false"
                                       data-step="1" data-size="xxs"/></td>
                            <td>
                                <input type="hidden" value="${currentUser.userId}" name="userId"/>
                                <input type="hidden" value="${db.dbId}" name="dbId"/>
                                <button type="button" class="btn btn-info" title="Registered user only" id="save">Save
                                </button>
                            </td>
                        </tr>
                        <c:forEach items="${db.ratingList}" var="rt">
                            <tr>
                                <td><input name="dataScore" value="${rt.dataScore}" class="rating rating-loading"
                                           data-show-clear="false" data-step="1" data-size="xxs"
                                           data-show-caption="false" data-readonly="true"/></td>
                                <td><input name="contentScore" value="${rt.contentScore}"
                                           class="rating rating-loading" data-show-clear="false"
                                           data-step="1" data-size="xxs" data-show-caption="false"
                                           data-readonly="true"/></td>
                                <td><input name="systemScore" value="${rt.systemScore}"
                                           class="rating rating-loading" data-show-clear="false"
                                           data-step="1" data-size="xxs" data-show-caption="false"
                                           data-readonly="true"/></td>
                                <td>${rt.ratingEmail} <br> <fmt:formatDate value="${rt.ratingDate}"
                                                                           pattern="yyyy-MM-dd"/></td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="${host}/static/js/wordcloud/d3.min.js"></script>
<script src="${host}/static/js/wordcloud/cloud.min.js"></script>
<script src="${host}/static/js/star-rating.min.js"></script>
<script>
    $('#submit').click(function () {
        if (${currentUser == null}) {
            $('#review').css('display', 'none');
            window.location = "${host}/login";
        } else {
            $.ajax({
                url: '${host}/database/rating/check?dbId=${db.dbId}&userId=${currentUser.userId}',
                type: 'get',
                success: function (data) {
                    if (data === 1) {
                        $('#msg').text('You had already reviewed the database.').css('color', 'red');
                        $('#review').css('display', 'none');
                    }
                }
            })
        }
    });

    $('#save').click(function () {
        var ds = $('input[name="dataScore"]').val();
        var cs = $('input[name="contentScore"]').val();
        var ss = $('input[name="systemScore"]').val();
        $.ajax({
            url: '${host}/database/rating?ds=' + ds + '&cs=' + cs + '&ss=' + ss + '&dbId=${db.dbId}&userId=${currentUser.userId}',
            type: 'get',
            success: function (data) {
                if (data === 0) {
                    $('#msg').text('Successful, thanks for your review!').css('color', 'green');
                } else {
                    $('#msg').text('Sorry, Please try it later!').css('color', 'red');
                }
            }
        })
    });
</script>
</body>
</html>
